<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html" 
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">

    <head>
        <title>TODO supply a title</title>
    </head>
    <body>

        <h:form id="form">  
  
    <p:growl id="msgs" showDetail="true"/>  
                  
    <p:panel header="Double Combo" style="margin-bottom:10px;">  
        <h:panelGrid columns="2" cellpadding="5">  
            <p:selectOneMenu id="city" value="#{pruebassss.city}">  
                <f:selectItem itemLabel="Select City" itemValue="" />  
                <f:selectItems value="#{pruebassss.cities}" />  
                <p:ajax update="suburbs"  
                        listener="#{pruebassss.handleCityChange()}" />  
            </p:selectOneMenu>  
  
            <p:selectOneMenu id="suburbs" value="#{pruebassss.suburb}">  
                <f:selectItem itemLabel="Select Suburb" itemValue="" />  
                <f:selectItems value="#{pruebassss.suburbs}" />  
            </p:selectOneMenu>  
        </h:panelGrid>  
  
        <p:separator />  
          
        <p:commandButton value="Submit" update="msgs" actionListener="#{pruebassss.displayLocation()}" id="btnSubmit"/>  
  
    </p:panel>  
  
</h:form> 
    </body>
</html>
